<template>
<div>
  <div :class="{'activity-ad': true, 'activity-ad1': productType === 'Hot'}"></div>
  <div class="activity-body">
    <div class="no-content" v-if="!activityProLen">
      暂无{{productType === 'New'? '新品推荐' :'热卖'}}商品
    </div>
    <!-- <div class="head" v-else>
      {{productType === 'New'? '新品推荐' :'爆款热卖'}}
    </div> -->
    <div class="activity-wrap">
      <template v-for="(item, index) in productList">
        <modelProduct :Item="item" :key="index" :isTop="$route.name === 'Hot' && index < 4" :Index="index"></modelProduct>
      </template>
    </div>
    <!-- :current-page="pageNum" -->
    <div style="text-align: center;" v-if="pageObj && pageObj.totalPages > 1">
      <el-pagination
        @current-change="handlePage"

        :page-size="25"
        layout="total, prev, pager, next, jumper"
        :total="pageObj.totalRecords">
      </el-pagination>
    </div>
    <!-- 品牌折扣 -->
    <!-- <div class="knife_container">
      <BrandProduct></BrandProduct>
    </div> -->
  </div>
</div>
</template>

<script>
import {Pagination} from 'element-ui'
import {modelProduct} from '@/components/index'
import {getHotSaleProductList, getNewOrActivityProductList} from '@/service/get-data'
import store from '../../store/'
const PAGESIZE = 25
export default {
  components: {
    modelProduct,
    elPagination: Pagination
  },
  computed: {
    activityProLen () {
      return (this.productList && this.productList.length) || 0
    },
    productType () {
      return this.$route.name
    }
  },
  data () {
    return {
      pageObj: {
        totalRecords: 1,
        pageIndex: 1,
        pageSize: PAGESIZE,
        totalPages: 1
      },
      pageNum: 1,
      productList: []
    }
  },
  methods: {
    // 新品
    async fetchNewProductList () {
      let res = await getNewOrActivityProductList(this.username, true, undefined, this.pageNum, PAGESIZE)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.productList = res.data.data.list
        this.pageObj = res.data.data.page
      } else {
        this.$message.error({
          message: res.data.resultMsg
        })
      }
    },
    async fetchHotProductList () {
      let res = await getHotSaleProductList(this.pageNum, PAGESIZE, store.state.user.username)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.productList = res.data.data.list
        this.pageObj = res.data.data.page
      } else {
        this.$message.error({
          message: res.data.resultMsg
        })
      }
    },
    getProductList () {
      if (this.productType === 'New') {
        this.fetchNewProductList()
      } else if (this.productType === 'Hot') {
        this.fetchHotProductList()
      }
    },
    handlePage (page) {
      this.pageNum = page
      this.getProductList()
    }
  },
  mounted () {
    this.pageNum = 1
    this.getProductList()
  },
  filters: {
  },
  watch: {
    '$route.name' () {
      this.pageNum = 1
      this.getProductList()
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-body{
  background:#F8F8F8;
  padding-bottom: 30px;
  width: 1190px;
  margin: 0 auto;
}
.activity-ad{
  width: 100%;
  height: 580px;
  background-image: url("./../../images/header_new.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.activity-ad1{
  background-image: url("./../../images/header_hot.png");
}
.head{
  margin: 16px 0;
  @include fontbase(#333333, 18px, 25px)
}
.activity-wrap{
  width: 1200px;
  margin: 15px auto 30px;
  &>a{
    margin: 5px 5px;
  }
}

</style>
